<template>
	<view class="custom-header" :style="{
	        height: headerHeight + 'px',
	        backgroundColor: isScrolled ? 'rgba(255, 255, 255, 0.95)' : 'transparent',
	        boxShadow: isScrolled ? '0 2px 5px rgba(0, 0, 0, 0.1)' : 'none'
	      }">
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		<view class="nav-bar" :style="{ height: navBarHeight + 'px' }">
			<view class="back-btn" @click="handleGoBack">
				<image src="/pagesA/static/details/back.svg" mode="aspectFill" class="goback" v-if="!isScrolled"></image>
				<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/back.png" mode="aspectFill" class="goback" v-else></image>
				<!-- <text class="iconfont icon-back"></text> -->
			</view>
			 <view class="title" v-show="isScrolled">{{title}}</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	const porps = defineProps({
		title:{type:String,default:''},
		isScrolled:{type:Boolean,default:false}
	})
	// 头部高度信息
	const statusBarHeight = ref(0); // 状态栏高度
	const navBarHeight = ref(44); // 导航栏高度
	const headerHeight = ref(44); // 总头部高度
	// 滚动状态
	// const isScrolled = ref(false);
	// 计算头部高度
	const calculateHeaderHeight = () => {
		const systemInfo = uni.getSystemInfoSync();

		// 获取状态栏高度
		statusBarHeight.value = systemInfo.statusBarHeight;

		// 计算总头部高度
		headerHeight.value = statusBarHeight.value + navBarHeight.value;
	};
	
	// 生命周期
	onMounted(() => {
		calculateHeaderHeight();
	});

	const handleGoBack = () => {
		uni.navigateBack()
	}
</script>

<style lang="less" scoped>
	/* 自定义头部 */
	.custom-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 30;
		transition: all 0.3s ease;
		.status-bar {
			background-color: transparent;
		}
		
		.nav-bar {
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			color: #fff;
			.title {
			  position: absolute;
			  left: 50%;
			  transform: translateX(-50%);
			  font-size: 34rpx;
			  font-weight: 600;
			  color: #000000;
			}
		}
		
		.back-btn {
			width: 60rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border-radius: 30rpx;
			// background-color: rgba(0, 0, 0, 0.3);
			z-index: 30;
		
			.goback {
				width: 100%;
				height: 100%;
			}
		}
		
	}
	
	
</style>